<template>
  <div>
    <h3>Hello World</h3>

    <p>initialCount: {{ initialCount }}</p>
    <p>initialCountDou: {{ initialCountDou }}</p>
    <p>count: {{ count }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  props: {
    initialCount: {
      type: Number,
      required: true
    }
  },

  // data() {
  //   return {
  //     count: this.initialCount
  //   }
  // },

  // computed: {
  //   initialCountDou() {
  //     return this.initialCount * 2
  //   }
  // },

  /**
   * props 当前组件接受的 props 数据
   *     1. 不要直接解构使用，会丢失响应式
   */
  setup(props) {
    // setup 中无法使用 this
    // const count = ref(this.initialCount)

    console.log('props', props)

    const count = ref(props.initialCount)

    const initialCountDou = computed(() => {
      return props.initialCount * 2
    })

    console.log(initialCountDou)

    return {
      count,
      initialCountDou
    }
  }
}
</script>
